<template>
  <!--新增对话框-->
  <el-dialog title="提示" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
    <el-form :model="editForm" :rules="editFormRules" ref="editForm" size="small">
      <el-form-item label="检测单位" prop="tblUnits" label-width="120px">
        <el-select v-model="editForm.tblUnits.name" placeholder="请选择检测单位" @change="currentSel($event)"
          :disabled="!isEditable" size="small">
          <el-option v-for="item in UnitsnameOptions" :key="item.unitsId" :label="item.name" :value="item.unitsId">
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测地点" prop="addressName" label-width="120px">
        <el-input v-model="editForm.addressName" placeholder="请选择检测地点" autocomplete="off" :disabled="!isEditable"
          style="width:280px">
        </el-input>
        <!-- <el-select v-model="editForm.addressName" placeholder="请选择检测地点" :disabled="!isEditable" size="small">
          <el-option v-for="item in addressNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
      </el-form-item>


    </el-form>

    <div slot="footer" class="dialog-footer" v-if="isEditable">
      <el-button @click="resetForm('editForm')">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import qs from 'qs';
export default {
  name: "DialogForAdd",
  data() {
    return {
      editForm: {
        // addressName: '',
        tblUnits: {
          name: ''
        }
      },
      //检测单位选择
      UnitsnameOptions: [],
      unitsId: '',
      // 表单验证规则
      editFormRules: {
        addressName: [
          { required: true, message: '请输入检测地址', trigger: 'blur' }
        ],
        tblUnits: [
          { required: true, message: '请选择检测单位', trigger: 'blur' }
        ],
      },
      editNotadd: false,
      beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId

    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    info: {
      type: Object,
      required: false
    },
    isEditable: {
      type: Boolean,
      required: false,
      default: true,
    },
    needShowInfo: {
      type: Boolean
    },
  },
  watch: {
    info: {
      deep: true,
      handler(newVal, oldVal) {
        if (JSON.stringify(this.info) !== "{}") {
          this.editForm = JSON.parse(JSON.stringify(this.info));
        } else {
          this.editForm = {
            // addressName: '',
            tblUnits: {
              name: ''
            }
          }
        }
      },
      immediate: true,
    },
    needShowInfo: {
      deep: true,
      handler() {
        this.editNotadd = this.needShowInfo
      },
      immediate: true,
    }
  },
  created() {
    this.getUnits()
  },
  methods: {
    //获取所有单位
    getUnits() {
      this.$axios.get("/gmu/tbl-units/getUnitsByParentId/" + this.beSampleUnitsId)
        .then(res => {
          this.UnitsnameOptions = res.data.data
        })
    },
    //选择检测单位获取单位ID
    currentSel(e) {
      this.unitsId = e;
      console.log("unitsId: ", this.unitsId)
      console.log(this.editForm.tblUnits.name)
      // this.$parent.addAddressInfo(e);
    },
    //提交编辑表单
    submitForm() {
      if (this.editNotadd == true) {
        //编辑检测地点
        var formData = {
          "addressId": this.info.addressId,
          "addressName": this.editForm.addressName,
          "unitsId": this.unitsId
        }
        this.$axios.put('/gmu/tbl-sample-address/updateSampleAddress', formData).then(res => {
          console.log("提交的检测地点信息：", formData)
          this.$parent.getAddressList()
        })
      } else {
        //新增检测地点
        var addSampleAddress = {
          unitsId: this.unitsId,
          addressName: this.editForm.addressName
        }
        this.$axios.post("/gmu/tbl-sample-address/addSampleAddress?" + qs.stringify(addSampleAddress)).then(res => {
          this.$parent.getAddressList()
        })
      }

      this.resetForm('editForm');
      // this.$emit("refreshTable", this.editForm);
      this.$emit("closeDialog");
    },
    // 重置对话框内容
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("closeDialog");
      this.editForm = {
        // addressName: '',
        tblUnits: {
          name: ''
        }
      }
    },
    //关闭提示框
    handleClose() {
      this.resetForm('editForm')
    },
  }
}
</script>

<style scoped>
</style>
